<template>
  <div class="header">
    <div class="left">
      <div class="title">
        {{ title ? title : isRegister ? $t('form.register.title'): $t('form.login.title') }}
      </div>
      <div class="desc" v-if="!isRegister">
        {{$t('form.login.desc')}}，<span @click="toggleStatus(1)">{{$t('form.login.please_register')}}</span>
      </div>
      <div class="desc" v-else>
        {{$t('form.register.desc')}}，<span @click="toggleStatus(0)">{{$t('form.register.please_login')}}</span>
      </div>
    </div>
    <div class="right">
      <img :src="loadImg('logo')" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  title?: string;
  isRegister?: boolean;
};
defineProps<Props>();

const toggleStatus = (status: number) => {
  if (status === 0) {
    navigateTo("/login");
  } else {
    navigateTo("/register");
  }
};
</script>
<style scoped lang="less">
.header {
  display: flex;
  justify-content: space-between;
  .left {
    .title {
      font-size: 32px;
      color: #172026;
    }
    .desc {
      font-size: 19px;
      color: #9daab2;
      span {
        color: var(--yd-primary-color);
        cursor: pointer;
      }
    }
  }
  .right {
    img {
      width: 64px;
      height: 67px;
    }
  }
}

@media screen and (max-width: 768px) {
  .header {
    .left {
      .title {
        font-size: 123px;
        margin-bottom: 41px;
      }
      .desc {
        font-size: 72px;
      }
    }
    .right {
      img {
        width: 246px;
        height: 256px;
      }
    }
  }
}
</style>
